jQuery|第三方plugin技巧

第 11 屆 iThome 鐵人賽

DAY 21

自我挑戰組

網頁排版個人學習筆記系列第 21 篇

11th鐵人賽

echocarrie

2019-09-22 09:16:53

2556 瀏覽

分享至

文章前提

Swiper輪播效果插件
- 推，有支援mobile touch
- 大陸有自行翻譯的swiper中文網可參考比對
LightBox燈箱效果插件
Animate 插件

載入第三方Plugin首要步驟

確認瀏覽器有無支援
確保 CSS、JS、IMG 皆載入
- 如果有CDN也可使用CDN即可
查詢plugin的Js設定
- 可開壓縮檔內的index.html看css與js路徑
修改css成自己要的樣式
- 盡量不要修改官方提供的css檔，可改自己的css檔內

why有些script js不放在`<head></head>`中而放在`<body></body>`內最後方?

跟隨網站指引的位置放
當網頁html裡的內容都被載好後，再來跑js再針對上面的圖片與內容做執行

Animate插件

Animate.css

載入方式
- 下載檔案於html中載入→ Animate.css 按右鍵另存新檔
- html中載入CDN→animate GitHub 教學

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

實作步驟-網頁載入直接有shake效果範例
- 於.box內加入 animated +動畫效果名稱
- js檔寫入addClass('動畫效果名稱')

<body>
    <input type="button" class="open" value="網頁載入即執行shake動作" >
    <div class="box animated shake"></div>
</body>

$(document).ready(function() {
    $('.open').click(function(event) {
        $('.box').addClass('shake');
    });
});

實作步驟-按下button才執行shake效果範例
- 要執行特效的.box 寫入animated
- js檔寫入addClass('動畫效果名稱')
- 記得載入Animate.css檔案或CDN

<body>
    <input type="button" class="open" value="按下按鈕才執行shake動作" >    
    <div class="box animated"></div>
</body>

$(document).ready(function() {
    $('.open').click(function(event) {
        $('.box').addClass('shake');
    });
});

上方狀況都只能執行一次:按下按鈕，box執行shake，要怎麼不重新整理頁面，按button重複搖動
- 使用animationend事件範例
- 'animationend' 簡單來說就是「動畫結束」的監聽事件，如果動畫結束了就將 class 從元素上移除從而達到你下次點擊也能產生動畫效果

Swiper 插件

輪播效果範例

打開Get Started看操作步驟
分別把css與 js的CDN放置 html中，推薦用 .min 壓縮版本(也可至首頁以下載檔案的方始載入)
- js的cdn可放置內的後方。當網頁html裡的內容都被載好後，再來跑js再針對上面的圖片與內容做執行
複製貼上Swiper提供的 HTML範本，自訂內容。
至API ，裡面提供很多輪播細部設定
- swiper parameters 內有許多參數設定，參數與參數間一定要用逗號 , 做分隔
- 不同的屬性都有自己的參數設定可看。ex: Pagination就可到Pagination parameters找它的細部設定

我習慣的步驟 紀錄一下XD

於載入css CDN
於內後方載入js核心與Swiper CDN
到Swiper DEMOS找喜歡的輪播特效，按 Source code到Github，複製程式碼到自己檔案
- 以 Navagation 為例，程式碼中 Initialize Swiper 我會整理到js檔案中

$(document).ready(function () {
    //丟這邊
});

如何把API放入js檔案中
Swiper API 左方可選取需要的設定，以Autoplay為例
* 把autoplay右方程式碼複製到$(document).ready(function () {}); 即可
* 如果要再加上另個參數loops(自動循環)，就以逗號分隔開再輸入loop:true, 即可，以此類推

$(document).ready(function () {
     var swiper = new Swiper('.swiper-container', {
    //自動播放
        autoplay: { 
            delay: 5000, 
        },
    //連續循環
        loop:true,
    });
});

常用到的參數有
- Autoplay 自動播放不需按按鈕
- speed 速度
- loop:true, 連續循環。例如:p3為末，再按一下又會回到p1
- direction 方向

如何移除不要的效果

以刪除scrollbar為例

<body>
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div><!--整行刪掉-->
</body>

$(document).ready(function() {
    var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
/*scrollbar整段刪掉
    // And if we need scrollbar    
    scrollbar: {
      el: '.swiper-scrollbar',
    },
*/    
  })
});

jQuery尾聲建議範例

同一個div中要寫css樣式及jq效果時，建議在class 加上另一個 jq-box，會比較好做管理
- 如果寫了很多網頁，但有些網頁不想要jq效果，只想要單純css樣式效果，就可以css處寫.box樣式。jQuery處用.jq-box就不會因為某個網頁不想加jq效果而改到崩潰

<body>
  <input type="button" class="btn jq-btn" value="button">
  <div class="box jq-box"></div>
</body>

$(document).ready(function () {
  $('.jq-btn').click(function(){
    $(this).siblings('.jq-box').toggleClass('active');
  });
});

jQuery|操控網頁元素2

RWD|基本環境介紹

系列文

網頁排版個人學習筆記共 30 篇

RSS系列文訂閱系列文

45 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

網頁排版個人學習筆記系列 第 21 篇